<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>列表页</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
		<link rel="stylesheet" type="text/css" href="../css/first-page.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="list-page">
			<div class="toop-public space-between">
				<a href="#" class="reverse">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">商品列表</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			<form action="" method="" class="search">
				<input type="text" placeholder="合亿户外" class="list-star" />
			</form>
			<div class="content">
				<ul class="list-title space-around">
					<li>综合</li>
					<li class="flex">销量
						<div class="images over-hidden">
							<img src="../img/list-page01.png" class="imga">
						</div>
					</li>
					<li class="flex">价格
						<div class="images over-hidden">
							<img src="../img/list-page01.png" class="imga">
						</div>
					</li>
					<li class="flex">筛选
						<div class="image">
							<img src="../img/list-page02.svg" class="imga">
						</div>
					</li>
				</ul>

				<ul class="list-commodity flex" id="list-commodity">
					<li class="skip">
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join skip">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join skip">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li class="skip">
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<div class="join">
								<img class="trolley" src="../img/trolley.svg">
							</div>
						</div>
					</li>
				</ul>
			</div>

			<div class="footer-public ">
				<ul class="space-around">
					<li>
						<div class="box-icon">
							<img src="../img/home-page.svg">
						</div>
						<span>首页</span>
					</li>
					<li>
						<div class="box-icon">
							<img src="../img/classify.svg">
						</div>
						<span>分类</span>
					</li>
					<li>
						<div class="apply">
							<p>文体</p>
							<p>活动</p>
						</div>
						<span class="polaris">报名</span>
					</li>
					<li>
						<div class="box-icon">
							<img src="../img/shopping.svg">
						</div>
						<span>购物车</span>
					</li>
					<li>
						<div class="box-icon">
							<img src="../img/mine.svg">
						</div>
						<span>我的</span>
					</li>
				</ul>
			</div>
			<a href="#" class="return-top">
				<img src="../img/to-top.svg" class="to-top">
			</a>
		</div>
		<script src="../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function commodity() {
				mock.comList.forEach(function(obj, index) {
					let litCommodit = document.getElementById('list-commodity');
					let imgs = litCommodit.getElementsByClassName('imgs');
					let yellow = litCommodit.getElementsByClassName('yellow');
					let text = litCommodit.getElementsByClassName('text');
					let price = litCommodit.getElementsByClassName('price');
			
					imgs[index].src = obj.listcom;
					yellow[index].innerHTML +=obj.listyello;
					text[index].innerHTML += obj.listtext;
					price[index].innerHTML += obj.price;
				})
			}
			commodity();	//商品列表动态创建
			
			document.addEventListener('plusready', function() {
				app.touchend({
					el: '.skip',
					path: 'commodity-details.html',
					effect: 'slide-in-right',
					time: 400
				});
				
				app.touchend({
					el;'.',
					path:'',
					effect:,
				});
				
			});
			

		</script>
	</body>
</html>
